<template>
  <div class="week-record">
    <div id="week-record" style="width: 100%; height: 260px"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts/core";
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart, LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

import { onMounted } from "vue";

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
onMounted(() => {
  const chartDom = document.getElementById("week-record");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option: echarts.EChartsCoreOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      // toolbox: {
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     magicType: { show: true, type: ["bar"] },
      //     restore: { show: true },
      //     saveAsImage: { show: true },
      //   },
      // },
      legend: {
        data: ["产品", "营收"],
      },
      grid: {
        left: "8%", // 设置距离容器左侧的距离
        right: "8%", // 设置距离容器右侧的距离
        bottom: "10%", // 设置距离容器底部的距离
        top: "15%", // 设置距离容器顶部的距离
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "产品",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: "{value} 件",
          },
        },
        {
          type: "value",
          name: "营收",
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: "{value} k",
          },
        },
      ],
      series: [
        {
          name: "产品",
          type: "bar",
          tooltip: {
            valueFormatter: (value: number) => `${value} 件`,
          },
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
        },
        {
          name: "营收",
          type: "bar",
          tooltip: {
            valueFormatter: (value: number) => `${value} k`,
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
        },
      ],
    };

    myChart.setOption(option);
    window.onresize = () => {
      myChart.resize();
    };
  }
});
</script>
<style lang="scss" scoped></style>
